<template>
  <div class="dialog3">
    <el-dialog
        :title="dialog3.title"
        :visible.sync="dialog3.show"
        :close-on-click-modal='false'
        :close-on-press-escape='false'
        :modal-append-to-body="false"
        :before-close='closeDialog'
        width="30%">
      <div class="form">
        <el-form ref="form" :model="formData" label-width="120px" style="margin:10px;width:auto;">
          <el-form-item label="姓名：" prop="name">
            <span>{{ formData.name }}</span>
          </el-form-item>
          <el-form-item label="地址：" prop="address">
            <span>{{ formData.address }}</span>
          </el-form-item>
          <el-form-item label="剩余应缴：" prop="price">
            <el-input v-model="formData.price" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="缴费金额：" prop="pay">
            <el-input v-model="formData.pay"></el-input>
          </el-form-item>
          <el-form-item label="应缴纳日期：" prop="date">
            <el-date-picker v-model="formData.date" type="date" :disabled="true"></el-date-picker>
          </el-form-item>
          <el-form-item label="状态：" prop="status">
            <el-select v-model="formData.status" :disabled="true">
              <el-option v-for="(formStatus,index) in format_status_list" :key="index" :label="formStatus"
                         :value="formStatus"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="text_right">
            <el-button @click="dialog3.show = false">取消</el-button>
            <el-button type="primary" @click='onSubmit("form")'>提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import paidApi from '../api/paid.js'

export default {
  name: 'useredit-dialog',
  props: {
    dialog3: Object,
    formData: Object
  },
  data() {
    return {
      addForm: {
        createDate: new Date()
      },
      // formData:{
      //   pay:'',
      // },
      format_status_list: [
        "已缴", "未缴"
      ],
      form_rules: {
        pay: [
          {required: true, message: '请输入金额', trigger: 'blur'},
        ],
      }
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    getInfo() {
    },

    closeDialog(done) {
      if (this.$refs['form'] !== undefined) {
        this.$refs['form'].resetFields();
      }
      done();
    },
    onSubmit(form) {
      if (this.formData.pay > 0 && this.formData.pay <= this.formData.price) {
        let leftPrice = this.formData.price - this.formData.pay;
        let leftStatus;
        if (leftPrice == 0) {
          leftStatus = "已缴";
        } else {
          leftStatus = "未缴";
        }
        this.$refs[form].validate(valid => {
          if (valid) {
            let pojo = {
              id: this.formData.id,
              price: leftPrice,
              date: this.formData.date,
              status: leftStatus,
              payDate: this.addForm.createDate,
            }

            paidApi.updatePaid(pojo).then(res => {
              //修改成功之后的处理
              if (res.data.flag) {
                this.$message({
                  message: "缴费成功",
                  type: "success"
                });
                this.dialog3.show = false;
                this.$emit('update');
              } else {
                this.$message({
                  message: "缴费失败",
                  type: "warning"
                });
              }
            });
          }
        });
      } else {
        this.$message({
          message: "请勿高于剩余金额！",
          type: "warning"
        });
      }
    }
  }
};
</script>

